<template>
  <div class="about">
    <div>{{num}}</div>
    <div>{{name}}</div>
    <!-- <div>{{name}}今年{{age}}岁了技能是{{explan}}</div> -->
    <button @click="submit">点击事件</button>
    <button @click="add">点击出现弹窗</button>
  </div>
</template>
<script>
// 什么是组合api?
// 组合api通俗的说，就是，可以把变量，和方法，都写到一块。
import { ref, reactive,toRefs, toRef } from 'vue'
// 在 vue3 里使用 proxy 来数据和视图的响应。
// 可以 使用 ref，和 reactive 来声明proxy响应的数据。
export default {
  // data(){
  //   return{
  //    num: 10,
  //   }
  // },
  // methods: {
  //   submit(){
  //     this.num++;
  //   }
  // },
  
  setup(){ // setup 在vue3里面就是我们长说的组合api
     // ref，和 reactive 区别，一般使用 ref 来声明基本的数据类型。
     // reactive 来声明引用的数据类型。

    // 数量++的逻辑
    const data = reactive({
      age: 18,
      name: '小明',
      explan: '敲代码'
    })

    const num = ref(0);
    // console.log(num);
    const submit = () => {
      num.value++;
    }


   
   const add = () => { // 可以写成普通的函数
     alert('我开始学vue3了');
   }

  //  function add(){
  //    alert('我开始学vue3了');
  //  }


  //  let sum = val => val+1;
    

    //特别注意： 在组合api里面只要是标签上用到的数据，或者方法，都需要 return 出去。
    return {
      // ...numAdd(),
      add,
      num,
      submit,
      // ...toRefs(data),
      name: toRef(data,'name')
    }
    // toRefs 就是展开reactive声明的引用类型的数据。
    // toRefs和 toRef 他俩的区别？
    // toRefs 可以直接展开对象里面的所有属性 toRef 只能展开某一个
  }
}

// vue3 提出的模块化的思想，就是为了让 vue 更适合做大型的项目。
// function numAdd(){ // 处理 num++的模块
//    const num = ref(0);
//    const submit = () => {
//       num.value++;
//    }
//    return { num,submit }
// }





// function fn (val) { // 这是普通函数
//   return val
// }

// 变成箭头函数
// let fn = (val) => {
//   return val
// }

// 当函数的形参只有一个的时候，（）可以省略不写；没有或者有多个都不能省略。

// let fn = val => {
//   return val
// }

// => 箭头本身自带 return 的意思；当函数有返回结果的时候，并且函数体里面的业务逻辑不复杂，我们是可以省略 return 和 {}

// let fn = val => val; // 就是一个函数
// console.log(fn(666));


// let arr = [1,2,3,4,5];
// // let arr1 = arr.filter(function(item){
// //   return item>3
// // });
// let arr1 = arr.filter(item => item>3);
// console.log(arr1);
</script>

